<template>
  <div class="swiper" :class="name">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 样式导入
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/modules/navigation/navigation.min.css'

// 模块安装
import MySwiper, {Navigation} from 'swiper';

Swiper.use([Navigation]);

export default {
  props:{
    name:{
      type:String,
      default: 'hhl'
    }
  },
  mounted() {
    // 初始化过早
    new Swiper("." + this.name, {
      freeMode: true,
      slidesPerView: "auto",
      spaceBetween: 10,
    })
  },
}
</script>

